<extend name="Base:main" />
<block name="title">
<title>食品管理</title>
</block>
<block name="main-content">
<div class="row">
	<div class="box col-md-12">
		<div class="box-inner">
			<div class="box-header well" data-original-title="">
				<h2>
					<i class="glyphicon glyphicon-user"></i>食品管理
				</h2>

				<div class="box-icon">
					<a href="#" class="btn btn-add btn-round btn-default"><i
						class="glyphicon glyphicon-plus"></i></a> <a href="#"
						class="btn btn-minimize btn-round btn-default"><i
						class="glyphicon glyphicon-chevron-up"></i></a> <a href="#"
						class="btn btn-close btn-round btn-default"><i
						class="glyphicon glyphicon-remove"></i></a>
				</div>
			</div>
			<div class="box-content">
				<div class="alert alert-info">对食品进行查看以及管理</div>
				<div class="loading col-sm-12 center">
					<img src="__PUBLIC__/img/ajax-loaders/ajax-loader-5.gif">
				</div>
				<table
					class="table table-striped table-bordered bootstrap-datatable datatable responsive"
					id="orderlist" style="display: none;">
					<thead>
						<tr>
							<th>食品样图</th>
							<th>食品名称</th>
							<th>食品类型</th>
							<th>食品标签</th>
							<th>食品单价</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<foreach name="list" item="v">
						<tr id="row_{$v.id}">
							<td><a title="{$v.food_name}" href="{$v.food_image}"
								class="cboxElement"><img class="dashboard-avatar"
									src="{$v.food_image}" alt="{$v.food_name}"
									style="display: block;"></a></td>
							<td>{$v.food_name}</td>
							<td>{$v.type}</td>
							<td>{$v.food_tag}</td>
							<td>{$v.price}/{$v.unit}</td>
							<td>
								<button class="btn btn-primary btn-xs"
									onclick="edit('{$v.id}');">
									<i class="glyphicon glyphicon-edit icon-white"></i>
								</button>
								<button class="btn btn-danger btn-xs btn-delete" id="{$v.id}">
									<i class="glyphicon glyphicon-trash icon-white"></i>
								</button>
							</td>
						</tr>
						</foreach>
					</tbody>
					<tfoot>
						<tr>
							<th style="visibility: hidden;">食品样图</th>
							<th>食品名称</th>
							<th>食品类型</th>
							<th>食品标签</th>
							<th style="visibility: hidden;">食品单价</th>
							<th style="visibility: hidden;">操作</th>
						</tr>
					</tfoot>
				</table>
			</div>
		</div>
	</div>
	<!--/span-->
</div>
<!--/row--> <!-- 删除菜单弹出框 -->
<div class="modal fade" id="myDeleteModal" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">删除食品</h4>
			</div>
			<div class="modal-body">
				<p id="sccontent" name="sccontent" style="font-size: 15px">你确定要删除该菜品吗？该操作不可恢复！</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				<button type="button" class="btn btn-danger">确定</button>
			</div>
		</div>
	</div>
</div>


<!-- 编辑菜单弹出框 -->
<div class="modal fade" id="myEditModal" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" style="width: 1200px;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">编辑食品</h4>
			</div>
			<div class="modal-body">
				<form id="form_edit" class="form-horizontal style-form"
					method="post" action="__APP__/Staff/Food/editFood"
					enctype="multipart/form-data">
					<input type="hidden" id="edit_id" name="id" />
					<div class="form-group">
						<label class="col-sm-2 control-label">食品名称：</label>
						<div class="col-sm-3">
							<input type="text" id="name" name="name" class="form-control">
						</div>
						<div class="col-sm-1"></div>
						<label class="col-sm-2 control-label">食品类型：</label>
						<div class="col-sm-3">
							<select id="type" name="type" class="form-control"
								onchange="selectTag(this.value);">
								<foreach name="type" item="item">
								<option value="{$item.type_name}">{$item.type_name}</option>
								</foreach>
							</select>
						</div>
						<div class="col-sm-1"></div>
					</div>
					<div class="form-group" style="position: relative;">
						<label class="col-sm-2 control-label">食品样图：</label>
						<div class="col-sm-3">
							<input type='text' class="form-control" name='textfield'
								id='textfield' placeholder="如无需修改图片" class='txt' disabled />
						</div>
						<div class="col-sm-1">
							<input type='button' style="position: absolute; top: 0;"
								class='btn' value='浏览' disabled /> <input style="opacity: 0;"
								type="file" name="fileField" class="file" id="fileField"
								size="28"
								onchange="document.getElementById('textfield').value=this.value" />
						</div>
						<label class="col-sm-2 control-label">食品标签：</label>
						<div class="col-sm-3">
							<select id="tag" name="tag" class="form-control tag">
							</select>
						</div>
						<div class="col-sm-1"></div>
					</div>
					<div class="form-group">
						<div class="col-sm-2 col-sm-offset-6">
							<button class="btn btn-default" id="btn-edit-category"
								type="button">添加规格</button>
						</div>
						<div class="col-sm-2"></div>
					</div>
					<div id="edit-category-other"></div>
					<div class="form-group">
						<label class="col-sm-2 control-label">食品简介：</label>
						<div class="col-sm-10">
							<textarea style="height: 100px;" id="introduce" name="introduce"
								class="form-control"></textarea>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				<button type="button" class="btn btn-danger">确定</button>
			</div>
		</div>
	</div>
</div>
<!-- 添加菜单弹出框 -->
<div class="modal fade" id="myAddModal" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" style="width: 1200px;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">添加食品</h4>
			</div>
			<div class="modal-body">
				<form id="form_add" class="form-horizontal style-form" method="post"
					action="__APP__/Staff/Food/addFood" enctype="multipart/form-data">
					<div class="form-group">
						<label class="col-sm-2 control-label">食品名称：</label>
						<div class="col-sm-3">
							<input type="text" id="name" name="name" class="form-control">
						</div>
						<label class="col-sm-2 control-label col-sm-offset-1">食品类型：</label>
						<div class="col-sm-3">
							<select id="type" name="type" class="form-control"
								onchange="selectTag(this.value);">
								<option value=""></option>
								<foreach name="type" item="item">
								<option value="{$item.type_name}">{$item.type_name}</option>
								</foreach>
							</select>
						</div>
					</div>
					<div class="form-group" style="position: relative;">
						<label class="col-sm-2 control-label">食品样图：</label>
						<div class="col-sm-3">
							<input type='text' class="form-control" name='textfield'
								id='textfield2' placeholder="请选择图片" class='txt' disabled />
						</div>
						<div class="col-sm-1">
							<input type='button' style="position: absolute; top: 0;"
								class='btn' value='浏览' disabled /> <input style="opacity: 0;"
								type="file" name="fileField" class="file" id="fileField"
								size="28"
								onchange="document.getElementById('textfield2').value=this.value" />
						</div>
						<label class="col-sm-2 control-label">食品标签：</label>
						<div class="col-sm-3">
							<select id="tag" name="tag" class="form-control tag">
							</select>
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-2 col-sm-offset-6">
							<button class="btn btn-default" id="btn-add-category"
								type="button">添加规格</button>
						</div>
						<div class="col-sm-2"></div>
					</div>
					<div id="add-category">
						<div class="form-group category-control">
							<input type="hidden" class="category_id" value=""> <label
								class="col-sm-2 control-label">规格：</label>
							<div class="col-sm-1">
								<input class="form-control category" type="text"
									name="category[]">
							</div>
							<div class="col-sm-8">
								<label class="col-sm-1 control-label"
									style="padding-left: 0px; padding-right: 0px;">成本：</label>
								<div class="col-sm-3">
									<div class="input-group col-sm-12">
										<span class="input-group-addon red">￥</span> <input
											class="form-control yprice" type="number" name="yprice[]">
									</div>
								</div>
								<label class="col-sm-1 control-label"
									style="padding-left: 0px; padding-right: 0px;">售价：</label>
								<div class="col-sm-3">
									<div class="input-group col-sm-12">
										<span class="input-group-addon red">￥</span> <input
											class="form-control price" type="number" name="price[]">
									</div>
								</div>
								<label class="col-sm-1 control-label"
									style="padding-left: 0px; padding-right: 0px;">单位：</label>
								<div class="col-sm-3">
									<select name="unit[]" class="form-control unit">
										<foreach name="unit" item="item">
										<option value="{$item.name}">{$item.name}</option>
										</foreach>
									</select>
								</div>
							</div>
						</div>
					</div>
					<div id="add-category-other"></div>
					<div class="form-group">
						<label class="col-sm-2 control-label">食品简介：</label>
						<div class="col-sm-10">
							<textarea style="height: 100px;" id="introduce" name="introduce"
								class="form-control"></textarea>
						</div>
					</div>
				</form>

			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				<button type="button" class="btn btn-danger">确定</button>
			</div>
		</div>
	</div>
</div>
</block>
<block name="js-content"> <script>
var updateCategory = "__APP__/Staff/Food/UpdateFoodCategory";
var addCategory = "__APP__/Staff/Food/addFoodCategory";
var delCategory = "__APP__/Staff/Food/delFoodCategory";

var deleteUrl="__APP__/Staff/System/deleteInfo";
var getInfo="__APP__/Staff/Food/getInfo";
var editFood="__APP__/Staff/Food/editFood";
var getTagurl  = "__APP__/Staff/Food/getFoodTag";

var action = "Food";

var food_tag;

$edit_category = $($("#add-category").html());
$edit_category.append('<div class="col-sm-1" style="padding-left:0px;padding-right:0px;">'+
						'<div class="category_default">'+
							'<button class="btn btn-default btn-ok-category blue" type="button">'+
								'<span class="glyphicon glyphicon-ok"></span>'+
							'</button>'+
							'<button class="btn btn-default btn-cancle-category red" type="button" style="margin-left:5px;">'+
								'<span class="glyphicon glyphicon-remove"></span>'+
							'</button>'+
						'</div>'+
						'<div class="category_update" style="display: none;">'+
							'<button class="btn btn-default btn-update-category  blue" type="button">'+
								'<span class="glyphicon glyphicon-pencil"></span>'+
							'</button>'+
							'<button class="btn btn-default btn-del-category red" type="button" style="margin-left:5px;">'+
								'<span class="glyphicon glyphicon-trash"></span>'+
							'</button>'+
						'</div>'+
					'</div>');
var edit_string_add = $edit_category.prop('outerHTML');				
$edit_category.find(".category").attr('disabled',"disabled");
$edit_category.find(".yprice").attr('disabled',"disabled");
$edit_category.find(".price").attr('disabled',"disabled");
$edit_category.find(".unit").attr('disabled',"disabled");

$edit_category.find(".category_default").hide();
$edit_category.find(".category_update").show();
// $category.append('<div class="col-sm-1"><a href="#"><span class="glyphicon glyphicon-ok blue"></span></a><a href="#"><span class="glyphicon glyphicon-remove red"></span></a></div>');
var edit_string = $edit_category.prop('outerHTML');
$category = $($("#add-category").html());
$category.append('<div class="col-sm-1"><button class="btn btn-default btn-del-category blue" type="button"><span class="glyphicon glyphicon-remove"></span></button></div>');
var string = $category.prop('outerHTML');

$("#btn-add-category").click(function(e){
	$("#add-category-other").append(string);
});
$("#btn-edit-category").click(function(e){
	$("#edit-category-other").append(edit_string_add);
});
var category,yprice,price,unit;
$("#myEditModal").on('click','.btn-ok-category', function(e) { 
	// Live handler called. 
	$control = $(this).parents(".category-control");
	var category_id = $control.find(".category_id").attr('value');
	category = $control.find(".category").val();
	yprice = $control.find(".yprice").val();
	price = $control.find(".price").val();
	unit = $control.find(".unit").val();
	if(category == ""){
		alert("规格不能为空");
		return;
	}
	if(yprice == ""){
		alert("成本不能为空");
		return;
	}
	if(price == ""){
		alert("售价不能为空");
		return;
	}
	
	$control.find(".category").attr('disabled',true);
	$control.find(".yprice").attr('disabled',true);
	$control.find(".price").attr('disabled',true);
	$control.find(".unit").attr('disabled',true);
	
	$control.find(".category_default").hide();
	$control.find(".category_update").show();
	if(category_id == ""){
		var fid = $("#edit_id").val();;
		$.post(addCategory,{fid:fid,title:category,yprice:yprice,price:price,unit:unit},function(data){
			$control.find(".category_id").attr('value',data);
		});
	}else{
		$.post(updateCategory,{id:category_id,title:category,yprice:yprice,price:price,unit:unit},function(data){
// 			console.log(data);
		});
	}
});
$("#myEditModal").on('click','.btn-cancle-category', function(e) { 
	// Live handler called. 
	$control = $(this).parents(".category-control");
	var category_id = $control.find(".category_id").attr('value');
	if(category_id == ""){
		$(this).parents(".form-group").remove(); 
	}else{
		$control.find(".category").val(category).attr('disabled',true);
		$control.find(".yprice").val(yprice).attr('disabled',true);
		$control.find(".price").val(price).attr('disabled',true);
		$control.find(".unit").val(unit).attr('disabled',true);
	
		$control.find(".category_default").hide();
		$control.find(".category_update").show();
	}
});
$("#myEditModal").on('click','.btn-update-category', function(e) { 
	// Live handler called. 
	$control = $(this).parents(".category-control");

	category = $control.find(".category").val();
	yprice = $control.find(".yprice").val();
	price = $control.find(".price").val();
	unit = $control.find(".unit").val();
	
	$control.find(".category").attr('disabled',false);
	$control.find(".yprice").attr('disabled',false);
	$control.find(".price").attr('disabled',false);
	$control.find(".unit").attr('disabled',false);

	$control.find(".category_default").show();
	$control.find(".category_update").hide();
});
$("#myEditModal").on('click','.btn-del-category', function(e) { 
	// Live handler called. 
	var count = $("#edit-category-other").find(".form-group").length;
	if(count > 1){
// 		console.log($("#edit-category-other").find(".form-group"));
		$item = $(this);
		$control = $(this).parents(".category-control");
		var category_id = $control.find(".category_id").attr('value');
		console.log(category_id);
		$.post(delCategory,{id:category_id},function(data){
			console.log(data);
			if(data){
				$item.parents(".form-group").remove(); 
			}else{
				alert("删除失败");
			}
		});
	}else{
		alert("最少得保留一个规格");
	}
});
$("#myAddModal").on('click','.btn-del-category', function(e) { 
	// Live handler called. 
	$(this).parents(".form-group").remove(); 
});
//打开编辑的modal.
function  edit(id)
{
	$(".btn-danger").attr('id',id);
	$("#edit_id").val(id);
	$("#edit-category-other").html("");
	$("#tag").html("");
	$.post(getInfo,{id:id},function(data){
// 		console.log(data);
		var category = data.category;
		var count = data.category.length;
		
		for(var i=0;i<count;i++){
			var item = category[i];
			var $item = $(edit_string);
			$item.find(".category_id").attr('value',item.cid);
			$item.find(".category").attr('value',item.category);
			$item.find(".yprice").attr('value',item.yprice);
			$item.find(".price").attr('value',item.price);

			$item.find(".unit").find("option[value='"+item.unit+"']").attr('selected',true);
			$("#edit-category-other").append($item.prop('outerHTML'));
		}
		$("#name").val(data.food_name);
		$("#type").val(data.type);
		
		food_tag = data.food_tag;
		$.post(getTagurl,{type:data.type},
				function(data){
			for(var j=0;j<data.length;j++){
				var str="<option value="+data[j]['tag_name']+">"+data[j]['tag_name']+"</option>";
				$("#tag").append(str);
			}
			$("#tag").val(food_tag);
		}); 
		$("#introduce").val(data.introduce);
		$("#yprice").val(data.yprice);
		$("#price").val(data.price);
// 		$("#unit").val(data.unit);
	});
	$("#myEditModal").modal('show');
}
function selectTag(type){
	console.log(type);
	$(".tag").html("");
	$.post(getTagurl,{type:type},function(data){
		console.log(data);
		for(var j=0;j<data.length;j++){
			var str="<option value="+data[j]['tag_name']+">"+data[j]['tag_name']+"</option>";
			$(".tag").append(str);
		}
	});
}
$('#myEditModal').on('click','button.btn-danger',function (a){
	$('#form_edit').submit();
});
/* //编辑操作.
$('#myEditModal').on('click','button.btn-danger',function (a){
	var id  = $(this).attr("id");
	var name=$("#name").val();
	var tag=$("#tag").val();
	var unit=$("#unit").val();
	var introduce=$("#introduce").val();
	var price=$("#price").val();
	var yprice=$("#yprice").val();
	var type = $("#type").val();
	$.ajaxFileUpload
	(
			{
				url: editFood, //用于文件上传的服务器端请求地址
				type: 'post',
				data: {id:id,name:name,tag:tag,unit:unit,introduce:introduce,price:price,yprice:yprice,type:type}, //此参数非常严谨，写错一个引号都不行
				secureuri: false, //一般设置为false
				fileElementId: 'fileField', //文件上传空间的id属性  <input type="file" id="file" name="file" />
				dataType: 'json', //返回值类型 一般设置为json
				success: function (data, status)  //服务器成功响应处理函数
				{
					if(data.status==1){
						alert("修改成功！");
						window.location.reload();
					}else{
						alert("修改失败！");
						window.location.reload();
					}

				},
				error: function (data, status, e)//服务器响应失败处理函数
				{
					alert("修改失败！");
					window.location.reload();
				}
			}
	)    
}); */
</script> </block>
